<template>
  <div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-lg-4 mt-10">
    <div class="col d-flex justify-content-center pb-5 " v-for="(item,index) in dataSourceList" :key="index">
      <div class="card shadow position-relative h-100 rounded-home-item" style="max-width: 310px;">
        <div class="card-header p-1">
          <img class="img-fluid lazy rounded-home-item-img" :style="{backgroundColor:item.bgColor}" :src="item.Img"
            :data-src="item.Img" width="300" height="150" :alt="item.Alt" />
        </div>
        <div class="card-body p-3">
          <h4 class="h5 mb-2"><a class="link-dark stretched-link" target="_blank" :href="item.Url">{{item.Title}}</a>
          </h4>
          <p class="card-text mb-3" style="height: 7rem; overflow: hidden;">{{item.Descriptions}}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { ref, onMounted } from 'vue';
  import axios from '../http/index';

  // 假设你有一个接口来定义数据源项的类型  
  interface DataSourceItem {
    bgColor?: string;
    Img: string;
    Alt: string;
    Url: string;
    Title: string;
    Descriptions: string;
    // ... 其他可能的属性  
  }

  const dataSourceList = ref < DataSourceItem[] > ([]); // 使用数组ref  

  const getLibraries = async () => {
    try {
      const res = await axios.get < DataSourceItem[] > ('/api/libraries/getLibraries');
      dataSourceList.value = res.data; // 假设API返回的是一个数组  
    } catch (error) {
      if (error) {
        // 假设这是一个 Axios 错误  
        console.error('Error:', 'error');
      } else if (error instanceof Error) {
        // 处理其他错误  
        console.error('Unknown error:', error.message);
      }
    }
  };

  onMounted(getLibraries); // 在组件挂载后获取数据  

  // 暴露给模板和其他组件（如果需要）  
  defineExpose({
    dataSourceList
  });

</script>


<style scoped>
  .rounded-home-item {
    transition: transform 0.3s ease;
    /* 过渡效果，持续0.3秒，使用ease函数 */
  }

  .rounded-home-item:hover {
    /* 鼠标移入时的样式 */
    transform: scale(1.1);
    /* 放大到原来的1.1倍 */
    /* 如果你想要添加阴影效果，也可以在这里添加 */
    box-shadow: 2px 4px 8px rgba(0, 0, 0, 0.5);
  }
</style>